<template>
	<div class="com-container">
		<h3>发表评论</h3>
		<hr>
		<!--[if IE]>
		
	<![endif]-->
		<textarea placeholder="请输入你想评论的内容,最多输入120字" maxlength="120" v-model="msg"></textarea>
		<mt-button type="primary" size="large" class="cmt-btn" @click="clickComponent">发表评论</mt-button>
		<div class="cmt-list">
			<div class="cmt-item" v-for="(item,i) in commentmsg" :key="i">
				<div class="cmt-title">
					第{{i+1}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间：<span>{{item.add_time |dateFormat}}</span>
				</div>
				<div class="cmt-body">
					{{item.content ==""||undefined? "该用户很懒" :item.content}}

				</div>

			</div>

		</div>
		<mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	export default({
		data() {
			return {
				commentmsg: [],
				pageindex: 1,
				msg: '' //发表评论内容
			}
		},
		created() {
			this.getComment()
		},

		methods: {
			getComment() {
				this.$http.get('api/getcomments/' + this.id + "?pageindex=" + this.pageindex).then(function(data) {
					if(data.body.status === 0) {
						
						this.commentmsg = this.commentmsg.concat(data.body.message)

					} else {
						Toast('获取评论失败')
					}

				})
			},
			//加载更多
			getMore() {
				this.pageindex++;
				this.getComment();

			},
			//点击发表评论
			clickComponent() {
                
				var msg1 = this.msg.trim();
				if(msg1.length == 0) {
				return	Toast('请输入评论内容')

				}
				debugger;
				this.$http.post("api/postcomment" +this.$route.params.id, {
					content: this.msg.trim()
				}).then(function(data) {
					console.log(data)
					if(data.body.status === 0) {
                         var   cms={
                         	user_name:"匿名用户",
                         	add_time:Date.now(),
                         	content:this.msg.trim()
                         }
						this.commentmsg.unshift(cms);
				        this.msg=''
				        Toast('发表评论成功！')
					} else {
						Toast('发表评论失败！')
					}
				})
			}

		},
		props: ['id']
	})
</script>

<style scoped="" lang="less">
	.com-container {
		padding-bottom: 50px;
		.cmt-btn {
			margin-top: 5px;
		}
		h3 {
			font-size: 18px;
		}
		textarea {
			margin: 0;
			font-size: 14px;
			height: 85px;
		}
		.cmt-list {
			margin: 5px 0;
			.cmt-item {
				font-size: 14px;
				.cmt-title {
					line-height: 30px;
					background-color: #ccc;
					span {
						color: #007AFF;
					}
				}
				.cmt-body {
					line-height: 35px;
					text-indent: 2em
				}
			}
		}
	}
</style>